<template>
<div>
  <h2>首字母转成大写</h2>
  <input type = "text" v-model="content" @change = "changeContent" style="width:300px"/>
  <h2>{{temp | changeLetter}}</h2>
</div>
</template>

<script>
export default {
  name: "case",
  data(){
    return{
      content:'hello world,my Name is jack.',
      temp:undefined,
    }
  },
  methods:{
    changeContent(){
      this.temp = this.content
    }
  },
  filters:{
    changeLetter(value){ // value是输入框的内容
       if(value){
          let str  = value.toString()
         let newValue =  str.split(" ").map(el=>{
           console.log(el)
           return el.charAt(0).toUpperCase()+el.slice(1)
         })
         console.log(str)
         return newValue.join(" ")
       }
    }
  }
}
</script>

<style scoped>

</style>
